<template>
	<view class="login">
		
		<!--  #ifdef  H5 -->
		<u-form :model="form" ref="uForm">
			<u-form-item label="账号" prop="userName">
				<u-input v-model="form.userName" />
			</u-form-item>
			<u-form-item label="密码" prop="passWord">
				<u-input v-model="form.passWord" />
			</u-form-item>
		</u-form>
		<view class="submit" @click="submit">提交</view>
		<!--  #endif -->
		
		<!--  #ifdef  APP-PLUS -->
		<web-view src="http://49.232.89.149"></web-view>
		<!--  #endif -->

	</view>
</template>
<!-- 
项目采用了 h5 + uni-app打包的技术
 百度人脸识别是h5项目 需要部署到服务器  
 打包使用web-view 引入H5项目   所以说 是两个项目  一份代码
 一个用来部署服务器  一个做壳 打包
 -->
<script>
	export default {
		data() {
			return {
				form: {
					userName: '',
					passWord: '',
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					passWord: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			}


		},
		methods: {
			submit() {
				//1. 首先前端先验证数据是否正常填写  
				//2. 数据验证通过调用后端接口
				//3. 后端接口登录成功才允许跳转页面
				//4. 失败停留当前页面  toast提示用户  (比如密码错误 请重新输入)
		

				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.$api.getlogin({
							userName: this.form.userName,
							passWord: this.form.passWord
						}).then(value => {
							console.log(value)
							uni.setStorageSync('token', value.token);
							uni.setStorageSync('id', value.userinfo.id);

							uni.navigateTo({
								url: '/pages/index/index'
							})
						}).catch(err => {
							this.$toast(err)
						})
					} else {
						console.log('验证失败');
					}
				});




			},
			scan() {
				///var/www/h5/dist/
				uni.navigateTo({
					url: '/pages/index/index?pageStatus=1'
				})

			},
			gobaidu() {
				window.location.href = 'https://www.baidu.com';
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.login {
		width: 750rpx;
		height: 100%;
		padding: 20rpx 30rpx 0;

		u-form {
			width: 600rpx;
			height: 300rpx;
			margin: 100rpx auto;
		}

		u-form-item {
			margin: 100prx 50rpx;
		}

		.submit {
			width: 90%;
			border: 1rpx solid #ccc;
			margin: 60rpx auto 0;
			border-radius: 20rpx;
			text-align: center;
			padding: 20rpx 0;
			background: #d5d5ad;
		}
	}
</style>
